<template>
	<view class="">
		<view class="shadow" :style="{'opacity':shadowShow?'1':'0','display':isShow?'block':'none'}" @click="shadowClose">
		</view>
		<view class="box" :style="{'opacity':shadowShow?'1':'0','display':isShow?'block':'none'}">
			<view class="c" :style="{'transform':boxShow?'scale(1)':'scale(0)'}">
				<slot name="box_template">
					<view class="detail">
						<view class="title">
							{{title}}
						</view>
						<view class="d">
							{{msg}}
						</view>
					</view>
					<view class="footer">
						<view class="l" @click="hide()">
							{{lButLabel}}
						</view>
						<view class="r" @click="handleSubmit">
							{{rButLabel}}
						</view>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '提示'
			},
			msg: {
				type: String,
				default: '这是一段提示？'
			},
			lButLabel: {
				type: String,
				default: '取消'
			},
			rButLabel: {
				type: String,
				default: '确定'
			},
			disableShadowClose: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isShow: false,
				shadowShow: false,
				boxShow: false,
			}
		},
		methods: {
			handleSubmit() {
				this.$emit('handleCilck')
				this.hide()
			},
			shadowClose(){
				if (this.disableShadowClose) {
					return
				}
				this.hide()
			},
			hide() {
				this.shadowShow = false
				this.boxShow = false
				setTimeout(() => {
					this.isShow = false
				}, 600)
			},
			show() {
				this.isShow = true
				setTimeout(() => {
					this.shadowShow = true
					this.boxShow = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		transition: all .6s;
		width: 80%;
		z-index: 10;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.c {
			background-color: #fff;
			transition: all .6s;
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.footer {
			border-top: 2rpx solid #EEF2F6;
			display: flex;
			align-items: center;

			.l {
				border-right: 2rpx solid #EEF2F6;
				width: 50%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.r {
				width: 50%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.detail {
			padding: 30rpx 20rpx;

			.title {
				text-align: center;
				font-size: 16px;
				color: #121820;
			}

			.d {
				text-align: center;
				color: #494E57;
				margin-top: 30rpx;
			}
		}
	}

	.shadow {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8;
		width: 100vw;
		height: calc(100vh - var(--window-top));
		background-color: rgba(#000, .5);
		transition: all .6s;
		display: none;
	}
</style>
